<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
<!-- URL：http://localhost:8080/kaoqin/huangdebiao-web/resumeList.html -->
	
		<h1 align="middle" style="font-size: 50px">面试记录</h1>
		<div id="mainResume" align="middle" >

				<table id="table" border="1" height="70px" width="1200px" style="text-align: center;">
					<t>
						<td>序号</td>
						<td>公司名称</td>	
						<td>面试岗位</td>
						<td>面试日期</td>
						<td>学生评价</td>
						<td>学生备注</td>
						<td>
							<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
								添加面试记录
							</button>
						</td>
					</t>
					
					
					<tr v-for="(resume,index) in resumeList">
						<td>{{index+1}}</td>
						<td>{{resume.company.name}}</td>
						<td>{{resume.job.name}}</td> 
						<td>{{resume.date}}</td>
						<td>{{resume.studentAppraisal}}</td>
						<td>{{resume.remark}}</td>
						<td><button :companyName="resume.company.name" :jobName="resume.job.name" :id="resume.id" @click="Getdetail($event)">详细信息</button></td>
					</tr>
					
					
					<!-- 按钮触发模态框 -->
					<!-- <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
						开始演示模态框
					</button> -->
					<!-- 模态框（Modal） -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										&times;
									</button>
									<h4 class="modal-title" id="myModalLabel">
										请输入面试信息
									</h4>
								</div>
								<div>
									
									<input type="text" placeholder="公司名称" class="modal-body">
									<span>
										<select v-model="selectText" @change="changeJob(selectText)">
											<option :id="job.id" v-for="job in jobList">{{job.name}}</option>
										</select>
									</span>
									
									
									
									<input v-model="" type="text" placeholder="面试日期" class="modal-body">
									<input v-model="" v-model="" type="text" placeholder="评价" class="modal-body">
									<input v-model="" type="text" placeholder="备注" class="modal-body">
									
								</div>
								
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭
									</button>
									<button type="button" class="btn btn-primary">
										提交更改
									</button>
								</div>
							</div><!-- /.modal-content -->
						</div><!-- /.modal -->
					</div>
					

				</table>

		</div>
		
		
		<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		
		<
		
	
		<!-- //////////////////////////////////////////////////////////////////////////////////////////////////////////// -->
		
		
		
		
		
		
	</body>
	
	<script>
		
		window.onload = function() {
			
			// 公共 vue
			var publicVue = new Vue({
				
				methods: {
					post(url, datas) {
						this.$http.post(url, datas, {
							emulateJSON: false
						}).then(function(backdatas) {
								location.reload();
						});
					},
				},
			});
			
			// myModal
			
			// var myModal = new Vue({
			// 	el: '#myModal',
			// 	data: {
			// 		jobList: {},
			//
			// 	},
			//
			//
			// });
			
			
			// 表格vue
			var table = new Vue({
				el: '#table',
				data: {
					resumeList: {},
					jobList: {},
				},
				methods: {
					getResumeList: function() {
						var url = 'http://localhost:8080/kaoqin/resume/findResumeByStudentId?studentId=100001';
						this.$http.get(url).then(function(backdatas) {
							// 拿到code码
							var code = backdatas.body.code;
							
							// 拿到后台返回的数据
							var dataR = backdatas.body.data;
							
							// 把 dataR 给 table的resumeList属性
							table.resumeList = dataR;
							console.log("success...");
							return dataR;
						});
					},
					
					getJobList: function() {
						var url = 'http://localhost:8080/kaoqin/job/selectAllJob';
						this.$http.get(url).then(function(backdatas) {
							// 拿到code码
							var code = backdatas.body.code;
							
							// 拿到后台返回的数据
							var dataR = backdatas.body.data;
							
							// 把 dataR 给 table的resumeList属性
							table.jobList = dataR;
							console.log(table.jobList);
							return dataR;
						});
					},
					
					
					Getdetail(e) {
						var companyName = e.target.getAttribute('companyName');
						var jobName = e.target.getAttribute('jobName');
						var resumeId = e.target.getAttribute('id');
						window.location.href="questionList.html?companyName=" + companyName+ "&jobName=" + jobName + "&resumeId=" + resumeId;
					},
				},
			});
			

			
			// 刷新表格
			table.getResumeList();
			table.getJobList();
		};

		// function Getdetail(e){
		// 	console.log(e.target.getAttribute('company'))
		// 	window.location.href="questionList.html?companyName=" + companyName+ "&jobName=" + jobName;
		// };
		
		
	</script>
	
	
</html>
